<template>
	<ComPop
		v-model="show"
		width="800px"
		title="地址薄"
		@saveSubmit="saveCustomer"
	>
		<div class="flex justify-between items-center mb-4">
			<span class="text-blue-500">地址薄（{{ addressList.length }}）</span>
			<el-button type="primary" @click="handleAdd" v-if="!readonly"
				>新增地址</el-button
			>
		</div>
		<div v-for="item in addressList" :key="item.id" class="address-card mb-4">
			<div class="flex justify-between items-center">
				<div>
					<div class="font-bold text-lg mb-1">{{ item.title }}</div>
					<div class="text-gray-500 mb-1">{{ item.region }}</div>
					<div class="mb-1">{{ item.detail }}</div>
					<div class="text-xs text-gray-400">
						{{ item.contact }} {{ item.phone }}
					</div>
				</div>
				<div class="flex items-center">
					<el-radio v-model="defaultId" :label="item.id" :disabled="readonly"
						>默认</el-radio
					>
					<el-button
						size="small"
						type="primary"
						class="ml-2"
						@click="handleEdit(item)"
						:disabled="readonly"
					>
						编辑
					</el-button>
					<el-button
						size="small"
						type="danger"
						class="ml-2"
						@click="handleDelete(item)"
						:disabled="readonly"
					>
						删除
					</el-button>
				</div>
			</div>
		</div>
		<addAddress ref="addAddressRef" @saveAddress="addSaveAddress" />
	</ComPop>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false);
const readonly = ref(false);
const addressList = ref<any[]>([]);
const defaultId = ref('');
import addAddress from './addAddress.vue';
const addAddressRef = ref();

function open(options: {
	list: any[];
	readonly?: boolean;
	defaultId?: string;
}) {
	addressList.value = options.list || [];
	readonly.value = !!options.readonly;
	defaultId.value = options.defaultId || '';
	show.value = true;
}
function handleAdd() {
	addAddressRef.value?.open();
}
function handleEdit(item: any) {
	addAddressRef.value?.open(item);
}
function addSaveAddress(addr: any) {
	// TODO: 保存/更新逻辑
	console.log(addr);
}
function handleDelete(item: any) {
	// TODO: 删除逻辑
	console.log(item);
}
function saveCustomer(addr: any) {
	// TODO: 保存/更新逻辑
	console.log(addr);
}
defineExpose({ open });
</script>

<style scoped>
.address-card {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px;
	background: #fff;
}
</style>
